<template>
    <div>
        <!-- 添加商品 -->
        <el-button type="primary" @click="dialogFormVisible = true; operataType = 'save'" style="margin-bottom: 20px;" >添加信息</el-button>
        <el-input placeholder="请输入内容" v-model="name"  style="width: 300px; left: 15px">
            <el-button slot="append" icon="el-icon-search" @click="findByName"></el-button>
        </el-input>
        <el-dialog title="用户信息" :visible.sync="dialogFormVisible" @close="handleClose">
        <el-form :model="product">
            <el-form-item label="商品编号" :label-width="formLabelWidth">
                <el-input v-model="product.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="product.product_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品图片" :label-width="formLabelWidth">
                <el-upload
                    class="avatar-uploader"
                    action="http://localhost:8080/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <el-image
                        style="width: 100px; height: 100px"
                        v-if="product.product_image" :src="product.product_image">
                    </el-image>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品价格" :label-width="formLabelWidth">
                <el-input v-model="product.price" show-password auto-complete="off" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品类型" :label-width="formLabelWidth">
                <el-select v-model="product.product_type" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.product_type_desc"
                        :label="item.product_type_name"
                        :value="item.product_type_desc">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品品牌" :label-width="formLabelWidth">
                <el-input v-model="product.product_brand" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品描述" :label-width="formLabelWidth">
                <el-input v-model="product.product_desc" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" :label-width="formLabelWidth">
                <el-input v-model="product.create_time" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
        </div>
        </el-dialog>
        <!-- 商品表 -->
        <el-table
            border
            stripe
            :data="products"
            max-height="500"
            style="width: 100%">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column label="商品编号" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.product_name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品价格" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品品牌" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.product_brand }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品类型" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.product_type }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品图片" width="180">
                <template slot-scope="scope">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.product_image"
                    >  
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="商品描述" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.product_desc }}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="150">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            style="margin-top: 20px;"
            background
            layout="prev, pager, next"
            :total="total"
            :page-size = "pageSize"
            :current-page ="current"
            @current-change="loadProduct">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        name: "ProductView",
        data() {
            return {
                //商品列表
                products: [],
                dialogFormVisible:false, //控制对话框的显示
                formLabelWidth:'120px',
                product:{id:'', product_name:'', product_image:'', price:'', product_type:'', product_desc:'',  product_brand:'', create_time:''},//商品数据
                operataType:'',//操作类型  save  update
                total:0,//用户总数
                pageSize:10,//每页行数
                current:0,//当前页数
                options: [],
                name:"",
            }
        },
        methods:{
            //读取商品
            loadProduct(current){
                this.current = current
                this.$http.post('/product?action=page', this.$qs.stringify({
                    pageSize: this.pageSize,
                    currentPage: this.current
                }))
                    .then(resp => {
                        //处理后台返回的结果
                        console.log(resp.data)
                        //数据绑定
                        if(resp.data.data){
                            this.total = resp.data.data.total
                            this.products = resp.data.data.records
                        }
                    })
            },
            findByName() {
                this.$http.post('/product?action=findByName&product_name=' + this.name)
                    .then(resp => {
                        if(resp.data.data) {
                            this.total = resp.data.data.length
                            this.products = resp.data.data
                            this.$message({
                            type: 'success',
                            message: '查询成功!'
                            });
                        }
                })
            },
            productType(){
                console.log(1);
                this.$http.get('/product_type?action=findAll')
                    .then(resp => {
                        console.log(1)
                            if(resp.data.data){
                                this.options = resp.data.data
                            }
                    })
            },
            handleEdit(index, row) {
                this.operataType = 'update';
                this.dialogFormVisible = true;
                console.log(index, row);
                this.product = JSON.parse(JSON.stringify(row))
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post('/product?action=delete&id='+ row.id)
                    .then(resp => {
                        if(resp.data.data == true){
                            this.loadProduct(this.current);
                            this.$message({
                                type:'success',
                                message:'删除成功'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type:'info',
                        message:'已取消删除'
                    });
                })    
            },
            handleSave(){
                if(this.operataType == 'save'){
                    console.log('save product');
                    this.$http.post('product?action=save',this.$qs.stringify(this.product))
                    .then(resp => {
                        console.log('save product', resp.data)
                        if(resp.data.data == true){
                            this.loadProduct(this.current);
                        }
                    })
                } else {
                    console.log('update product');
                    this.$http.post('product?action=update',this.$qs.stringify(this.product))
                    .then(resp => {
                        console.log('update product', resp.data)
                        if(resp.data.data == true){
                            this.loadProduct(this.current);
                        }
                    })
                }
                this.dialogFormVisible = false
            },
            handleClose(){
                console.log();
                this.product = {id:'', product_name:'', product_image:'', price:'', product_type:'', product_desc:'', create_time:'', product_brand:''}
                this.operataType = ''
            },
            handleAvatarSuccess(res, file) {
                console.log('upload',res.data)
                this.product.product_image = res.data
            }
        },
        //页面挂载钩子
        mounted(){
            this.loadProduct(1)
            this.productType()
        }
    }
</script>